<template>
  <div class="trends2-doctor-list-1" data-number="武德四年">
    <template v-for="itemInfo in doctorDataClean">
      <div class="first-group">
        <template v-for="item in itemInfo">
          <div class="doctor-info-item">
            <div class="name-wrap">
              <div class="picture-info">
                <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
              </div>
              <div class="doctor-info">
                <div class="name item">{{ item.workerName }}</div>
                <div class="level item">
                  <ScrollX>{{ item.workerTitle || '\u00a0' }}</ScrollX>
                </div>
                <div class="dept item" v-if="optionsInfo.doctorDept">
                  <ScrollX>{{ item.deptName || '\u00a0' }}</ScrollX>
                </div>
                <div class="register item" v-if="optionsInfo['registerShow']">
                  <template v-if="item?.preTreatingPatient?.length">
                    <ScrollX>{{ item?.preTreatingPatient[0]?.registerObjName || '\u00a0' }}</ScrollX>
                  </template>
                </div>
              </div>
            </div>
            <div class="patient-wrap">
              <div class="current-patient patient" :class="{'current-patient-only': !optionsInfo['waitPatientShow']}">
                <div class="patient-type-sign">就诊</div>
                <div class="patient-content"
                     :class="{'current-patient-content':item.treatingPatient?.length>=2}"
                >
                  <vue-seamless-scroll
                      class="scroll"
                      :ref="`scroll-${item.workerId}`"
                      :class-option="optionScroll"
                      :data="getPatientInfo('current',item)"
                  >
                    <template v-for="itemPatient in getPatientInfo('current',item)">
                      <div class="patient-item">
                        <template v-if="itemPatient.orderNo">
                          {{ itemPatient.orderNo || '\u00a0' }}
                        </template>
                        <template v-if="itemPatient.patientName">
                          {{ itemPatient.patientName || '\u00a0' }}
                        </template>
                      </div>
                    </template>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div class="wait-patient patient" v-if="optionsInfo['waitPatientShow']">
                <div class="patient-type-sign">候诊</div>
                <div class="patient-content"
                     :class="{'wait-patient-content':item.waitingPatientList?.length>=2}">
                  <vue-seamless-scroll
                      class="scroll"
                      :ref="`scroll-${item.workerId}`"
                      :class-option="optionScroll"
                      :data="getPatientInfo('wait',item)"
                  >
                    <template v-for="itemPatient in getPatientInfo('wait',item)">
                      <div class="patient-item">
                        <template v-if="itemPatient.orderNo">
                          {{ itemPatient.orderNo || '\u00a0' }}
                        </template>
                        <template v-if="itemPatient.patientName">
                          {{ itemPatient.patientName || '\u00a0' }}
                        </template>
                      </div>
                    </template>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";

export default {
  name: "trends1DoctorList-4",

  componentName: "trends2DoctorList",

  components: {
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    doctorData: {
      type: Array,
      default: Array(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    }
  },

  computed: {
    optionScroll() {
      return {
        hoverStop: true,
        direction: 1,                 // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
        limitMoveNum: 2,              // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    doctorDataClean() {
      return this.$lodash.chunk(this.doctorData, 2)
    },

    // 候诊患者&就诊患者
    getPatientInfo() {
      return function (type, row) {
        switch (type) {
          case 'current':
            if (row?.treatingPatient.length) {
              return row.treatingPatient.slice(0, 1)
            } else {
              return []
            }
          case 'wait':
            if (row?.waitingPatientList.length) {
              return row.waitingPatientList.slice(0, 1)
            } else {
              return []
            }
        }
      }
    }
  },

  mounted() {

  },

  methods: {
    handleError(event) {
      event.target.src = '/tpleditor/resource/assets/images/header.png'
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  }

};
</script>

<style lang="scss" scoped>
.trends2-doctor-list-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;

  .first-group {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    margin-bottom: 24px;
    overflow: hidden;
    flex-basis: calc((100% - 24px) / 2);

    &:last-child {
      margin-bottom: 0;
    }

    .doctor-info-item {
      flex: 1;
      flex-shrink: 0;
      flex-basis: 0;
      height: calc(100%);
      background: white;
      border-radius: 18px;
      overflow: hidden;
      padding: 26px;
      box-sizing: border-box;

      &:first-child {
        margin-right: 12px;
      }

      &:last-child {
        margin-left: 12px;
      }

      .name-wrap {
        font-weight: 500;
        font-size: 60px;
        color: #333333;
        line-height: 1.5;
        height: 290px;
        width: 100%;
        flex-shrink: 0;
        overflow: hidden;
        display: flex;

        .picture-info {
          width: 200px;
          height: 100%;
          flex-shrink: 0;
          overflow: hidden;
          font-size: 24px;
          border-radius: 12px;
          background: #E8E8E8;

          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border: 1px #dcdee2 solid;
          }
        }

        .doctor-info {
          display: flex;
          flex-direction: column;
          margin-left: 24px;
          width: calc(100% - 200px - 28px);
          overflow: hidden;
          flex-grow: 1;

          .item {
            margin-top: 8px;
            flex-shrink: 0;
            flex-grow: 1;
            flex-basis: 0;
            overflow: hidden;
          }

          .name {
            font-weight: 500;
            font-size: 60px;
            color: #333333;
            display: flex;
            padding-bottom: 26px;
          }

          .level {
            font-weight: 500;
            font-size: 30px;
            color: #FFFFFF;
            padding: 2px 6px;
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            display: flex;
            flex-shrink: 0;
            max-height: 54px;
            background: rgba(0, 89, 179, 1);
          }

          .dept {
            font-weight: 500;
            font-size: 40px;
            color: #0059B3;
            line-height: 1.38;
            white-space: nowrap;

            :deep(.st-inner) {
              margin: inherit;
            }
          }

          .register {
            font-weight: 500;
            font-size: 40px;
            color: #0059B3;
            line-height: 1.38;
            white-space: nowrap;

            :deep(.st-inner) {
              margin: inherit;
            }
          }
        }
      }

      .patient-wrap {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        .patient {
          height: 120px;
          overflow: hidden;
          border-radius: 18px;
          margin-top: 24px;
          display: flex;

          .patient-type-sign {
            flex-basis: 136px;
            flex-shrink: 0;
            height: 100%;
            justify-content: center;
            align-content: center;
            align-items: center;
            align-self: center;
            text-align: center;
          }

          .patient-content {
            display: flex;
            flex-direction: column;
            flex-basis: calc(100% - 136px);
            height: 100%;
            justify-content: center;

            .patient-item {
              width: calc(100% - 30px);
              font-size: 50px;
              color: #333333;
              line-height: 1.4;
              padding-left: 30px;
              white-space: nowrap;
            }
          }
        }

        .current-patient {
          background: rgba(0, 89, 179, 0.2);

          .patient-type-sign {
            background: rgba(0, 89, 179, 1);
            color: white;
          }

          .patient-content {
            .patient-item {
              color: rgba(0, 89, 179, 1);
            }
          }

          .current-patient-content {
            justify-content: center;

            .patient-item {
              line-height: 1.5;
            }
          }

        }

        //隐藏候诊患者
        .current-patient-only {
          display: flex;
          height: 264px;
          flex-direction: column;

          .patient-type-sign {
            width: 100%;
            font-size: 64px;
            overflow: hidden;
          }

          .patient-content {
            overflow: hidden;

            .patient-item {
              font-size: 76px;
            }
          }
        }

        .wait-patient {
          background: rgba(229, 134, 2, 0.2);

          .patient-type-sign {
            background: rgba(229, 134, 2, 1);
            color: white;
          }

          .patient-content {
            .patient-item {
              color: rgba(229, 134, 2, 1);
            }
          }

          .wait-patient-content {
            justify-content: center;

            .patient-item {
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}
</style>